<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户注册</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<!-- 引入组件库 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.4.7/lib/index.js"></script>
<div id="app">

    <el-container>
        <el-header>用户注册</el-header>
        <el-main>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="用户名">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">注册</el-button>
                </el-form-item>
            </el-form>

        </el-main>
        <el-footer></el-footer>
    </el-container>


</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            form: {
                username: '',
                password: ''
            }
        },
        methods: {
            onSubmit: function(event){
                var self = this;
                $.ajax({
                    url: '/user/register',
                    type: 'POST',
                    dataType: 'JSON',
                    data: this.form,
                    success: function(data){
                        console.log(data);
                        if(data.status == 0){
                            location.href = '/user_login.jsp';
                        }else{
                            self.$notify.error({
                                title: '错误',
                                message: data.message
                            });
                        }
                    }
                })
            },
            onRegister: function(event){
                location.href = '/'
            }
        }
    })
</script>
</body>
</html>
